<template>
  <a-spin :spinning='loading'>
    <a-card>
      <section slot='title'>商品列表</section>
      <a-row :gutter='16'>
       <!-- <a-col :span='5'>
          <span class='label'>ID：</span>
          <a-input :max-length='100' allow-clear v-model='id' placeholder='请输入Id' />
        </a-col> -->
        <a-col :span='5'>
          <span class='label'>商品名称：</span>
          <a-input :max-length='100' allow-clear v-model='name' placeholder='请输入商品名称' />
        </a-col>
        <!-- <a-col :span="5">
          <span class="label">店铺：</span>
          <a-select v-model="status" class="w-full" allow-clear placeholder="请选择店铺状态">
            <a-select-option :value="1">禁用</a-select-option>
            <a-select-option :value="2">启用</a-select-option>
          </a-select>
        </a-col> -->
        <!-- <a-col :span="5">
          <span class="label">创建日期：</span>
          <a-range-picker  v-model="createTime" class="w-full" placeholder="请选择创建日期" />
        </a-col> -->
        <a-col :span='5'>
          <span class='label'>状态：</span>
          <a-select v-model='status' class='w-full' allow-clear placeholder='请选择状态'>
            <a-select-option v-for='item in orderStatusEnums' :value='item.value' :key='item.value'>{{
                item.name
              }}
            </a-select-option>
          </a-select>
        </a-col>

        <a-col :span='8'>
          <a-button class='ml-18' type='primary' @click='search'>查询</a-button>
          <a-button class='mx-8' @click='reset'>重置</a-button>
          <a-button @click='getEdit' class='mx-8' type='primary'>新增</a-button>
          <a-button type='primary' ghost class='ml-10 border-5' @click='exportTable'>导出</a-button>
        </a-col>
      </a-row>
      <a-table class='mt-16 order-table' :columns='columns' :data-source='data' :scroll='scroll'
               :pagination='pagination'>
        <!-- <template #status="status, data">
          {{ data.status == 1 ? '成功' : '失败' }}
        </template> -->
        <template #picUrl='picUrl, data'>
          <PreviewImage v-if='data.showUrl' :value='getPhotos(data.showUrl)' />
        </template>
        <template #firstCategoryId='firstCategoryId, data'>
          {{ data.firstCategoryId }},{{ data.secondCategoryId }}
        </template>
        <template #createTime='createTime, data'>
          {{ $utils.formatTimestamp(data.createTime) }}
        </template>
        <template #status='status, data'>
          {{ data.status == 1 ? '上架' : '下架' }}
        </template>

        <template #action='action, data'>
          <div class='flex items-center justify-between'>
            <a-button @click='getEdit(data)' class='mr-10' type='primary'>
              编辑
            </a-button>
            <!-- <a-button @click='goCharts(data)' style='background: 	#32CD32;' type='primary'>
              查看
            </a-button> -->
            <a-button @click='delect(data)' class='ml-10 mr-10' type='danger'>
              删除
            </a-button>
            <!-- <a-button style="background-color: #FFD700;" type="primary">
              重置
            </a-button> -->
          </div>
        </template>

      </a-table>
      <!-- <a-divider  /> -->
    </a-card>
    <particulars ref='particulars'></particulars>
    <create @upload='upload' ref='create' type='2' isfrom="newPeopleGoods"></create>
  </a-spin>
</template>
<script>
import create from '../components/create.vue'
import particulars from '../components/particulars'
import {
  getSpuPage,
  getSpuDelete
} from '@/api/newPet'
import {
  tableMixins
} from '@/utils/mixins'

export default {
  mixins: [tableMixins],
  components: {
    particulars,
    create
  },
  data() {
    return {
      loading: false,
      tabs: 'select1',
      orderId: undefined,
      createTime: [undefined, undefined],
      status: undefined,
      name:'',
      id:'',
      orderStatusEnums: [{
      		value: 1,
      		name: '上架'
      	},
      	{
      		value: 0,
      		name: '下架'
      	}
      ],
      data: [],
      columns: [{
        title: '序号',
        dataIndex: 'sortNumb',
        align: 'center',
        width: 140,
        scopedSlots: {
          customRender: 'sortNumb'
        }
      },
        {
          title: '商品ID',
          dataIndex: 'id',
          align: 'center',
          width: 140,
          scopedSlots: {
            customRender: 'id'
          }
        },
        {
          title: '商品名称',
          dataIndex: 'name',
          width: 120,
          align: 'center',
          scopedSlots: {
            customRender: 'name'
          }
        },
        {
          title: '商品图片',
          dataIndex: 'picUrl',
          align: 'center',
          width: 70,
          scopedSlots: {
            customRender: 'picUrl'
          }
        },
        {
          title: '商品分类',
          dataIndex: 'firstCategoryId',
          align: 'center',
          width: 70,
          scopedSlots: {
            customRender: 'firstCategoryId'
          }
        },
        {
          title: '上架时间',
          dataIndex: 'createTime',
          align: 'center',
          width: 70,
          scopedSlots: {
            customRender: 'createTime'
          }
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          width: 70,
          scopedSlots: {
            customRender: 'status'
          }
        },
        {
          title: '可售库存',
          dataIndex: 'stock',
          align: 'center',
          width: 70,
          scopedSlots: {
            customRender: 'stock'
          }
        },
        {
          title: '销量',
          dataIndex: 'salesCount',
          align: 'center',
          width: 70,
          scopedSlots: {
            customRender: 'salesCount'
          }
        },
        {
          title: '操作',
          fixed: 'right',
          dataIndex: 'action',
          width: 160,
          scopedSlots: {
            customRender: 'action'
          },
          align: 'center'
        }
      ]

    }
  },
  computed: {},
  watch: {},
  async created() {

  },
  mounted() {
    this.search()
  },
  methods: {
    search() {
      this.pageNum = 1
      this.getData()
    },
    getPhotos(img) {

      return img.split(',')
    },
    upload() {
      this.search()
    },
    delect(data) {
      this.$confirm({
        title: '删除',
        content: `请确认是否删除该条信息`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
     
          this.loading = true
          getSpuDelete({
            id: data.id
          })
            .then((res) => {
              this.$message.success('删除成功！')

              this.search()

              this.loading = false
            })
            .finally(() => (this.loading = false))

        }
      })
    },
    goCharts(data) {
      this.$refs.create.open(data)
      this.$refs.create.columns= [
        {
          title: '规格名称',
          dataIndex: 'name',
          align: 'center',
          width: 140,
          scopedSlots: {
            customRender: 'name'
          }
        },
        {
          title: '规格图片',
          dataIndex: 'picUrl',
          width: 120,
          align: 'center',
          scopedSlots: {
            customRender: 'picUrl'
          }
        },
        {
          title: '规格库存',
          dataIndex: 'stock',
          align: 'center',
          width: 70,
          scopedSlots: {
            customRender: 'stock'
          }
        },
        {
          title: '规格价格（元）',
          dataIndex: 'price',
          align: 'center',
          width: 70,
          scopedSlots: {
            customRender: 'price'
          }
        },
        {
          title: '成本价格',
          dataIndex: 'costPrice',
          align: 'center',
          width: 70,
          scopedSlots: {
            customRender: 'costPrice'
          }
        },
        {
          title: '新人最高可售库存',
          dataIndex: 'newCustomerStock',
          align: 'center',
          width: 70,
          scopedSlots: {
            customRender: 'newCustomerStock'
          }
        },
        {
          title: '新人价格（元）',
          dataIndex: 'newCustomerPrice',
          align: 'center',
          width: 70,
          scopedSlots: {
            customRender: 'newCustomerPrice'
          }
        },
        {
          title: '操作',

          dataIndex: 'action',
          width: 160,
          scopedSlots: {
            customRender: 'action'
          },
          align: 'center'
        }
      ]
      // this.$refs.particulars.open()
    },
    getEdit(data) {
      this.$refs.create.open(data)
      this.$refs.create.columns= [
        {
          title: '规格名称',
          dataIndex: 'name',
          align: 'center',
          width: 140,
          scopedSlots: {
            customRender: 'name'
          }
        },
        {
          title: '规格图片',
          dataIndex: 'picUrl',
          width: 120,
          align: 'center',
          scopedSlots: {
            customRender: 'picUrl'
          }
        },
        {
          title: '规格库存',
          dataIndex: 'stock',
          align: 'center',
          width: 70,
          scopedSlots: {
            customRender: 'stock'
          }
        },
        {
          title: '规格价格（元）',
          dataIndex: 'price',
          align: 'center',
          width: 70,
          scopedSlots: {
            customRender: 'price'
          }
        },
        {
          title: '成本价格',
          dataIndex: 'costPrice',
          align: 'center',
          width: 70,
          scopedSlots: {
            customRender: 'costPrice'
          }
        },
        {
          title: '新人最高可售库存',
          dataIndex: 'newCustomerStock',
          align: 'center',
          width: 70,
          scopedSlots: {
            customRender: 'newCustomerStock'
          }
        },
        {
          title: '新人价格（元）',
          dataIndex: 'newCustomerPrice',
          align: 'center',
          width: 70,
          scopedSlots: {
            customRender: 'newCustomerPrice'
          }
        },
        {
          title: '操作',

          dataIndex: 'action',
          width: 160,
          scopedSlots: {
            customRender: 'action'
          },
          align: 'center'
        }
      ]
    },
    getSearchParams() {
      return {
        pageNo: this.pageNum,
        pageSize: this.rowsNum,
        name: this.name,
        id: this.id,
        status: this.status,
        type: 2

      }
    },
    getData() {
      this.loading = true
      getSpuPage(this.getSearchParams()).then(data => {
        for (let i = 0; i < data.list.length; i++) {
          data.list[i].showUrl = data.list[i].picUrl.split(',')[0]
        }
        this.total = data.total
        this.data = data.list
      }).finally(() => this.loading = false)
    },
    reset() {
      this.createTime = [undefined, undefined]
      this.name = undefined
      this.id = undefined
      this.status = undefined
    }
  }
}
</script>
<style lang='less' scoped>
.ant-col {
  margin-bottom: 20px;
  display: flex;
  align-items: center;

  .label {
    flex-shrink: 0;
    width: 86px;
    text-align: right;
    font-size: 14px;
    color: #595959;
  }

  .w-full {
    flex: 1;
  }
}
</style>